<template>
  <view class="container">
    <z-paging
      ref="paging"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <view slot="top">
        <u-navbar
          backIconColor="#fff"
          :background="background"
          height="50"
          :border-bottom="false"
          title-color="#333"
        ></u-navbar>
        <view
          class="contentBg"
          :style="[`background-image: url(${getImageUrl('store-bg.png')} );`]"
        >
          <!-- <view class="contentBg" :style="{backgroundImage: `url(${shopInfo.logo})`}"> -->
        </view>
        <view class="mer-top">
          <view class="mer-info">
            <view class="mer-info-right">
              <view class="mer-title dis-flex flex-y-between">
                <!-- {{shopInfo.name}} -->
                <view>景区名称景区名称景区名称</view>
                <view class="follow" v-if="!isFollow" @click="onFollow">
                  <u-icon class="t-icon" name="/static/scsp.png" size="36"></u-icon>
                  <view>收藏</view>
                </view>
                <view class="follow" v-else @click="onFollow">
                  <u-icon
                    class="t-icon"
                    @click="onFollow"
                    name="/static/scsp_xz.png"
                    size="36"
                  ></u-icon>
                  <view>已收藏</view>
                </view>
              </view>
            </view>
          </view>
          <view class="store-des dis-flex flex-y-center">
            <view class="star">
              <text class="goods-star">5A</text>
            </view>
            <view class="sale-item" @click="routeTo('/travel/attra-comment')">
              <text>186条评论</text>
              <u-icon
                style="margin-bottom: 4rpx; margin-left: 4rpx"
                name="/static/enter.png"
                size="20"
              ></u-icon>
            </view>
            <view class="sale-item" @click="routeTo('/travel/attra')">
              <text>景区介绍</text>
              <u-icon
                style="margin-bottom: 4rpx; margin-left: 4rpx"
                name="/static/enter.png"
                size="20"
              ></u-icon>
            </view>
          </view>

          <view class="store-content">
            <view class="houre dis-flex flex-y-center flex-y-between" style="margin-bottom: 20rpx">
              <view class="dis-flex flex-y-center flex-y-between">
                <u-icon class="h-h-icon" name="/static/sj.png" size="28"></u-icon>
                <text>开园时间：8:00-16:30</text>
              </view>
              <u-icon
                @click="phone(shopInfo.contactMobile)"
                class="h-icon"
                name="/static/bh.png"
                size="32"
              ></u-icon>
            </view>
            <view class="houre dis-flex flex-y-center flex-y-between">
              <view class="address oneline-hide-1">
                <u-icon
                  style="position: relative; top: 6rpx"
                  class="h-h-icon"
                  name="/static/dw-h.png"
                  size="28"
                ></u-icon>
                <text>贵州省贵阳市南明区花果园大街贵州省贵阳市南明区南明区...</text>
              </view>
              <u-icon @click="dhd()" class="h-icon" name="/static/dhd.png" size="32"></u-icon>
            </view>
            <view class="postion">距您1.7km</view>
          </view>
        </view>
        <u-gap height="20" bg-color="#F7F7F7"></u-gap>
        <view class="card buy-box">门票购买</view>
        <u-gap height="20" bg-color="#F7F7F7"></u-gap>
      </view>

      <view slot="left" class="rightView">
        <scroll-view
          scroll-y
          class="scrollView"
          :style="{ height: scrollHeight }"
          :enhanced="true"
          :show-scrollbar="false"
        >
          <view class="menuView">
            <view
              :class="menuIndex == index ? 'menuTab' : 'menuTab2'"
              v-for="(item, index) in menuList"
              :key="index"
              @click="onMenuTab(index, item)"
            >
              {{ item.name }}
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="itemView" style="display: flex" v-for="(item, index) in itemList" :key="index">
        <view class="" style="display: flex">
          <u-image
            @click="onDetails(item)"
            width="160"
            height="160"
            :src="item.picUrl"
            border-radius="8"
          ></u-image>
          <view class="itemInfo">
            <view class="itemTitle dis-flex flex-y-between">
              <view class="oneline-hide-1">景区门票(成人票)</view>
              <view class="vip-price n">¥20</view>
            </view>
            <view class="sales">今日可定</view>
            <view class="point-rule dis-flex flex-y-between">
              <view class="price">
                <text class="t">购票须知</text>
                <u-icon
                  style="margin-bottom: 4rpx; margin-left: 4rpx"
                  name="/static/enter.png"
                  size="20"
                ></u-icon>
              </view>
              <view class="uicon" @click="showBuyNow = true"> 购票 </view>
            </view>
          </view>
        </view>
      </view>
      <u-gap height="20" bg-color="#fff"></u-gap>
    </z-paging>
    <u-popup
      v-model="showBuyNow"
      mode="bottom"
      width="750"
      height="740"
      :closeable="true"
      border-radius="20"
    >
      <view class="buy_box">
        <view class="tl">景区门票(成人票)： </view>
        <view class="rule" @click="showInfoCate = true">
          <text>购票须知</text>
          <u-icon
            style="margin-bottom: 4rpx; margin-left: 4rpx"
            name="/static/enter.png"
            size="20"
          ></u-icon>
        </view>
        <view class="date-check">
          <view class="tl">游玩日期</view>
          <view class="date-list dis-flex flex-y-between">
            <view class="date-item check">今日</view>
            <view class="date-item">明日</view>
            <view class="date-item">2024-10-16</view>
            <view class="date-item more"
              >更多<u-icon
                style="margin-bottom: 4rpx; margin-left: 4rpx"
                name="/static/more.png"
                size="20"
              ></u-icon
            ></view>
          </view>
        </view>
        <view class="type">
          <view class="tl">门票类型</view>
          <view class="type-in dis-flex flex-y-between">
            <view>门票</view>
            <view class="price">
              <text class="">原价:</text>
              <text class="num" style="margin-right: 40rpx">¥20</text>
              <text class="red">会员价:</text>
              <text class="red num">¥15</text>
            </view>
          </view>
        </view>
        <view class="bt" @click="routeTo('/travel/comfirm-order')"> 立即预定 </view>
      </view>
    </u-popup>
    <u-popup
      v-model="showInfoCate"
      mode="bottom"
      width="750"
      height="740"
      :closeable="true"
      border-radius="20"
    >
      <view class="cate_box">
        <view class="tl">购票须知</view>
        <view class="notic">
          参观浏览范围：景区内免费游玩区域，其他收费区域需另行买票；参观浏览范围：景区内免费游玩区域，其他收费区域需另行买票；
          参观浏览范围：景区内免费游玩区域，其他收费区域需另行买票；参观浏览范围：景区内免费游玩区域，其他收费区域需另行买票；参观浏览范围：景区内免费游玩区域，其他收费区域需另行买票；
          参观浏览范围：景区内免费游玩区域，其他收费区域需另行买票；参观浏览范围：景区内免费游玩区域，其他收费区域需另行买票；参观浏览范围：景区内免
          参观浏览范围：景区内免费游玩区域，其他收费区域需另行买票；
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  data() {
    return {
      showInfoCate: false,
      showBuyNow: false,
      imgStyle: {
        width: '12rem'
      },
      skuInfo: {},
      iconStyle: {
        width: '50rpx',
        height: '50rpx'
      },
      titleStyle: {
        fontSize: '28rpx'
      },
      totalPrice: '',
      shopInfo: {},
      scrollHeight: '800rpx',
      userShow: false,
      current: 0,
      scurrent: 0,
      checkCate: {
        id: ''
      },
      goodsList: [],
      itemList: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}],
      userInfo: '',
      menuIndex: 0,
      menuList: [{ name: '全部' }, { name: '门票' }, { name: '套票' }, { name: '全通票' }],
      shopId: '',
      price_order: '',
      sale_order: '',
      sortIndex: '',
      checkedCate: '',
      tcurrent: 0,
      skuMode: 3,
      isFollow: true,
      background: {
        background: 'transparent'
      }
    }
  },
  onLoad(e) {
    this.shopId = e.id
    this.$u
      .get('/app-api/shop/info/get', {
        id: e.id
      })
      .then((res) => {
        this.shopInfo = res.data
        // this.$u.get("/app-api/vlog/fans/is-follow?vlogUserId=" + res.data.userId).then(res => {
        // 	this.isFollow = res.data
        // })
      })
    this.$u.get('/app-api/shop/info/get-category-list?type=1').then((res) => {
      let arr = []
      for (let item of res.data) {
        if (item.parentId == 6) {
          //this.this.menuList.push(item)
          arr.push(item)
        } else {
          for (let item2 of res.data) {
            if (item2.id == item.parentId) {
              if (item2.children) {
                item2.children.push(item)
              } else {
                item2.children = [item]
              }
              break
            }
          }
        }
      }
      // this.menuList = arr
      this.checkedCate = this.menuList[0]
      // this.queryList()
    })
  },

  methods: {
    routeTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    onMenuTab(index, e) {
      this.menuIndex = index
      this.checkedCate = e
      this.tcurrent = 0
      this.queryList()
    },

    queryList(pageNo = 1, pageSize = 10) {
      this.$u
        .get('/app-api/vlog/info/page', {
          shopId: this.shopId,
          status: 1,
          pageNo,
          pageSize
        })
        .then((res) => {
          this.$refs.paging.complete(res.data.list)
        })
    },

    phone(phone) {
      uni.makePhoneCall({
        phoneNumber: phone
      })
    },
    dhd() {
      uni.openLocation({
        latitude: this.shopInfo.latitude,
        longitude: this.shopInfo.longitude
      })
    },

    onGoodsBuy() {
      let self = this
      let cartIds = []
      let form = this.goodsList.map((item) => {
        if (item.selected == true) {
          let sku_name_arr = item.sku.properties.map((item) => {
            return item.valueName
          })
          return {
            _id: item.sku.id,
            cartId: item.id,
            buy_num: item.count,
            goods_name: item.spu.name,
            image: item.picUrl,
            price: item.sku.price,
            sku_name_arr
          }
        }
      })

      this.$utils.route({
        url: '/goods/order-confirm/order-confirm',
        params: {
          goods: JSON.stringify(form)
        }
      })
    },

    onFollow(item) {
      if (this.shopInfo.isFollow) {
        uni.$u
          .post('/app-api/vlog/fans/cancel', {
            vlogUserId: this.shopInfo.userId,
            myUserId: uni.getStorageSync('userInfo').id
          })
          .then((res) => {})
      } else {
        uni.$u
          .post('/app-api/vlog/fans/follow', {
            vlogUserId: this.shopInfo.userId,
            myUserId: uni.getStorageSync('userInfo').id
          })
          .then((res) => {})
      }
      this.isFollow = !this.isFollow
    }
  }
}
</script>

<style scoped lang="scss">
page {
  background: #f7f7f7;
}
.red {
  color: #fa453c;
}
.num {
  font-size: 32rpx;
  font-weight: 600;
}
.scroll-y-class {
  height: 100%;
}
.buy-box {
  font-weight: 600;
  font-size: 32rpx;
}

.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 317rpx;
}

.mer-top {
  width: 100%;
  height: 320rpx;
  background: #ffffff;
  border-radius: 20rpx 20rpx 0rpx 0rpx;
  padding: 30rpx 20rpx 20rpx 20rpx;
  position: relative;
  margin-top: 30rpx;

  .mer-info {
    background-color: #fff;
    display: flex;

    &-left {
      flex: 3;
      display: flex;
      justify-content: center;
      align-items: center;

      image {
        width: 180rpx;
        height: 180rpx;
      }
    }

    &-right {
      flex: 7;
      position: relative;

      .mer-title {
        font-size: 34rpx;
        // margin: 10rpx 0;
      }

      .follow {
        font-size: 24rpx;
        color: #333333;
        text-align: center;
      }
    }
  }

  .store-des {
    margin-bottom: 30rpx;
    .star {
      width: 56rpx;
      height: 32rpx;
      background: #d7f5f1;
      border-radius: 6rpx;
      font-size: 22rpx;
      color: #10a28f;
      text-align: center;
      line-height: 32rpx;
      margin-right: 30rpx;
    }

    .sale-item {
      font-size: 26rpx;
      color: #666666;
      margin-right: 30rpx;
    }
  }

  .coupon-banner {
    background-color: #fff;
    position: relative;
    margin: 20rpx 0;

    &-item {
      display: inline-block;
      padding: 5rpx 20rpx;
      border: 2rpx solid #f54831;
      font-size: 20rpx;
      color: #fa453c;
      border-radius: 35rpx;
      margin-right: 15rpx;
    }

    &-more {
      position: absolute;
      top: 25%;
      right: 5rpx;
      font-size: 20rpx;
      color: #999999;
    }
  }

  .store-content {
    font-size: 26rpx;
    color: #333333;

    .houre {
      margin-bottom: 15rpx;

      // flex: 1;
      .h-h-icon {
        margin-right: 10rpx;
        margin-bottom: 2rpx;
      }
    }

    .h-icon {
      margin-left: 10rpx;
    }

    .postion {
      font-size: 26rpx;
      color: #999999;
      margin-left: 40rpx;
      margin-top: -10rpx;
    }
  }

  .tabsView {
    background-color: #fff;
    margin-top: 20rpx;
    background-color: #fff;
  }
}

.rightView {
  width: 180rpx;
  height: 100%;
  background: #f7f7f7;
}

.scrollView {
  display: flex;
  flex-direction: column;
  width: 180rpx;
  height: 100%;
}

.menuView {
  display: flex;
  flex-direction: column;
}

.menuTab {
  height: 110rpx;
  line-height: 110rpx;
  background: #d7f5f1;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #10a28f;
  position: relative;
}

.menuTab2 {
  height: 110rpx;
  line-height: 110rpx;
  border-bottom: 1px solid #fff;
  text-align: center;
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.menuTab::before {
  content: '';
  position: absolute;
  border-left: 3px solid #10a28f;
  height: 110rpx;
  left: 0;
  top: 0;
}

.headView {
  display: flex;
  align-items: center;
  position: sticky;
  background: #fff;
  z-index: 100;
  height: 80rpx;
  top: 0px;
}

.sortTab {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  padding: 0px 20rpx;
  font-size: 24rpx;
  font-weight: 400;
  color: #333333;
}

.sortTab2 {
  display: flex;
  flex-direction: row;
  align-items: center;
  line-height: 80rpx;
  text-align: center;
  padding: 0px 20rpx;
  font-size: 28rpx;
  color: #333333;
  // color: #22B857;
}

.itemView {
  display: flex;
  margin: 0px 20rpx;
  // margin-bottom: 40rpx;
  background-color: #fff;
}

.itemInfo {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 10rpx;
  position: relative;

  .point-rule {
    font-size: 24rpx;
    color: #ff6f10;
    align-items: center;
  }

  .sales {
    font-size: 24rpx;
    color: #999999;
  }

  .price {
    color: #333333;
    margin-right: 20rpx;
  }

  .vip-price {
    color: #fa453c;
  }

  .t {
    font-size: 26rpx;
  }

  .n {
    font-size: 32rpx;
    font-weight: 600;
  }

  .uicon {
    // position: absolute;
    // right: 0;
    // bottom: 0rpx;
    width: 120rpx;
    height: 56rpx;
    line-height: 56rpx;
    text-align: center;
    background: #10a28f;
    border-radius: 28rpx;
    font-size: 28rpx;
    color: #ffffff;
  }
}

.itemText {
  font-size: 26rpx;
  font-weight: 400;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemPrice {
  font-size: 20rpx;
  font-weight: 400;
  color: #ff3616;
  margin-right: 10rpx;
}

.itemPrice2 {
  font-size: 28rpx;
  font-weight: bold;
  color: #ff2323;
  margin-right: 10rpx;
}

.itemOPrice {
  font-size: 24rpx;
  font-weight: 400;
  text-decoration: line-through;
  color: #c2c2c2;
}

.content-tip {
  display: flex;
  height: 140rpx;
  background-color: #fff;
  margin: 20rpx 0;
  padding: 20rpx;
}

.mer-rate-left {
  flex: 3;
  text-align: center;

  view {
    font-size: 45rpx;
    font-weight: 700;
  }

  p {
    color: #666666;
  }
}

.mer-rate-right {
  flex: 7;
  margin-top: 20rpx;

  text {
    font: 35rpx;
  }

  .rate-tip {
    padding: 5rpx 10rpx;
    color: #ffac0e;
    background-color: #f5f0e6;
  }
}

.txt1 {
  font-size: 35rpx;
  float: left;
}

.txt2 {
  float: right;
  color: #7e7e5e;
}

.comment-img {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.video-area {
  &-box {
    float: left;
    width: 33%;
    height: 400rpx;

    .video-area-cover {
      width: 100%;
      height: 100%;
    }
  }
}

.submit-btn {
  position: fixed;
  left: 50%;
  bottom: 20rpx;
  transform: translate(-50%);
  width: 700rpx;
  height: 90rpx;
  display: flex;
  align-items: center;
  z-index: 999;
  font-size: 35rpx;
  border-radius: 100rpx;
  overflow: hidden;
  color: #fff;

  &-left {
    flex: 7;
    background-color: #333333;
    height: 100%;
    line-height: 90rpx;
  }

  &-right {
    flex: 3;
    height: 100%;
    background-color: #10a28f;
    line-height: 90rpx;
    text-align: center;
  }
}

.submit-btn2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 690rpx;
  height: 80rpx;
  line-height: 80rpx;
  bottom: 50rpx;
  background-color: #10a28f;
  color: #fff;
  border-radius: 40rpx;
  text-align: center;
}

.itemView {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  // border-radius: 12rpx;
  margin: 0px;
  // margin-top: 20rpx;
  padding: 20rpx;
}

.allSelectedView {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.itemType {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #22b857;
  margin-left: 10rpx;
}

.itemType2 {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #ff9711;
  margin-left: 10rpx;
}

.itemType3 {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #fd2cac;
  margin-left: 10rpx;
}

.itemTime {
  font-size: 24rpx;
  font-weight: 400;
  color: #999999;
  margin-left: 10rpx;
}

.errorTitle {
  flex: 1;
  font-size: 30rpx;
  font-weight: bold;
  color: #666666;
}

.itemDetele {
  font-size: 28rpx;
  font-weight: 400;
  color: #333333;
}

.allHead {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemAddView {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-left: 50rpx;
  margin-top: 8rpx;
}

.itemMoney {
  font-size: 22rpx;
  font-weight: 400;
  color: #ff4242;
  height: 34rpx;
  line-height: 34rpx;
  padding: 0px 10rpx;
  text-align: center;
  background: #feecec;
  border-radius: 5rpx;
  margin-right: 10rpx;
}

.itemTitle {
  font-size: 28rpx;
  color: #333333;
}

.itemTitle text {
  color: #ff4242;
}

.itemAdd {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.itemAdd text {
  font-size: 22rpx;
  font-weight: 400;
  color: #333333;
  margin-right: 5rpx;
}

.goodsView {
  display: flex;
  flex-direction: row;
  margin-bottom: 20rpx;
  position: relative;
}

.goodsBg {
  width: 100%;
  height: 150rpx;
  background: #ffffff70;
  position: absolute;
  z-index: 100;
  top: 0px;
}

.selectedView {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
  margin-left: -40rpx;
}

.goodsData {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-left: 20rpx;
  margin-right: 20rpx;
}

.goodsTitle {
  font-size: 26rpx;
  font-weight: 500;
  color: #333333;
}

.goodsSku {
  font-size: 24rpx;
  font-weight: 500;
  color: #999999;
}

.priceView {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.goodsPrice {
  flex: 1;
  font-size: 26rpx;
  font-weight: 400;
  color: #ff2323;
}

.goodsPrice text {
  font-size: 32rpx;
  font-weight: 400;
  color: #ff2323;
}

.numberBox {
  border: 1px solid #f2f2f2;
}

.imageView {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 150rpx;
  height: 150rpx;
  position: relative;
}

.groupbox {
  background-color: #fff;
  // padding: 30rpx 20rpx;
  width: 100%;
}

.groupItemView {
  padding: 30rpx 20rpx 10rpx 20rpx;

  .store-image {
    position: relative;
  }

  .goods_title {
    font-size: 28rpx;
    color: #333333;
    font-weight: 600;
    margin-bottom: 6rpx;
  }

  .miaosu {
    font-size: 24rpx;
    color: #666666;
  }

  .sales {
    font-size: 24rpx;
    color: #999999;
  }

  .point-rule {
    font-size: 24rpx;
    color: #ff6f10;
    margin: 6rpx 0;
  }

  .goods_tip {
    .price {
      color: #333333;
      margin-right: 20rpx;
    }

    .vip-price {
      color: #fa453c;
    }

    .t {
      font-size: 26rpx;
    }

    .n {
      font-size: 32rpx;
      font-weight: 600;
    }

    .bt {
      width: 150rpx;
      height: 60rpx;
      background: #10a28f;
      border-radius: 30rpx;
      font-size: 28rpx;
      color: #ffffff;
      line-height: 60rpx;
      text-align: center;
    }
  }
}

.comment-top {
  width: 750rpx;
  height: 150rpx;
  background: #ffffff;
  margin-bottom: 20rpx;
  padding: 20rpx 0 20rpx 0;
  display: flex;
  flex-flow: column;
  justify-content: space-between;

  .count {
    align-items: center;

    .count-l {
      width: 180rpx;
      text-align: center;
    }

    .count-r {
      .type {
        background: #ffffff;
        border-radius: 6rpx;
        border: 1px solid #e6e6e6;
        padding: 4rpx 10rpx;
        font-size: 20rpx;
        color: #666666;
        margin-right: 20rpx;
      }

      .checked {
        background: #f5e7e6;
        color: #fa453c;
      }
    }

    .star {
      font-weight: 600;
      font-size: 48rpx;
      color: #333333;
    }

    .des {
      font-size: 28rpx;
      color: #666666;
    }
  }
}

.card {
  background-color: #fff;
  padding: 20rpx;
}

.card-tl {
  font-weight: 600;
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 30rpx;
}

.address-1 {
  color: #333333;
  font-size: 28rpx;
  padding: 37rpx 20rpx;

  .add {
    color: #666666;
  }
}

.jiankang {
  .jk-top {
    font-size: 28rpx;
    color: #999999;
  }

  .dt {
    text-align: center;

    .dt-text {
      font-size: 28rpx;
      color: #333333;
      margin-top: 20rpx;
    }
  }
}
.buy_box {
  padding: 30rpx 20rpx;
  .tl {
    font-weight: 600;
    font-size: 30rpx;
    padding: 10rpx 0;
  }
  .rule {
    font-size: 24rpx;
    color: #666666;
    margin-bottom: 50rpx;
  }
  .date-list {
    padding: 20rpx 0;
    .date-item {
      width: 180rpx;
      height: 60rpx;
      line-height: 60rpx;
      text-align: center;
      background: #f5f5f5;
      border-radius: 10rpx;
      font-size: 28rpx;
    }
    .more {
      width: 110rpx;
    }
    .check {
      color: #ffffff;
      background: #10a28f;
    }
  }
  .type {
    margin-top: 20rpx;
    .type-in {
      margin-top: 20rpx;
      .price {
        font-size: 26rpx;
      }
    }
  }
  .bt {
    width: 710rpx;
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #10a28f;
    border-radius: 40rpx;
    font-size: 30rpx;
    color: #ffffff;
    position: absolute;
    bottom: 30rpx;
  }
}
.cate_box {
  padding: 50rpx 20rpx;
  .tl {
    font-weight: 600;
    font-size: 34rpx;
    text-align: center;
    margin-bottom: 30rpx;
  }
  .notic {
    font-size: 30rpx;
    color: #333333;
    line-height: 50rpx;
  }
}
</style>
